<template>
  <div id="workflow">
    <div class="tree">
      <el-button size="small" type="primary" @click="addWorkTreeVisible = true" style="margin-bottom:20px">添加</el-button>
      <el-popover
        placement="top"
        width="160"
        v-model="typeVisible">
        <p>确定要删除吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="typeVisible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="typeDelete">确定</el-button>
        </div>
        <el-button slot="reference" type="danger" size="small">删除</el-button>
      </el-popover>
      <el-tree
        :highlight-current="true"
        ref="orgTree"
        node-key="id"
        :data="workList"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <div class="table">
      <div class="workflow-top-button">
        <el-button size="medium" type="primary" @click="dialogFormVisible = true" plain>新增</el-button>
      </div>
      <div class="workflow-table">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="name"
            label="流程名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="180">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.status === 1">已启用</span>
                <span v-if="scope.row.status === 0">已停用</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间">
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="最后修改时间">
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">配置</el-button>
              <el-button @click="handleClickEditName(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="handleReleaClick(scope.row)" type="text" size="small">启用</el-button>
              <el-button @click="handleVoidClick(scope.row)" type="text" size="small">停用</el-button>
              <el-button @click="handleClickAddOrg(scope.row)" type="text" size="small">部门</el-button>
              <el-button @click="handleClickAddType(scope.row)" type="text" size="small">分类</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pull-right paddingTop">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size='10'
            :current-page='this.pageNo'
            :total="this.total"
            layout="prev, pager, next"
            >
          </el-pagination>
        </div>
      </div>
      <el-dialog title="添加流程" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="流程名称" :label-width="formLabelWidth">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="流程对应编号" :label-width="formLabelWidth">
            <el-input maxlength="8"	 v-model="form.nameNo"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addWorkFlow">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="分配部门" :visible.sync="dialogAddOrgFormVisible">
        <el-tree
          ref="setOrgTree"
          node-key="id"
          :data="orgList"
          :props="defaultProps"
          show-checkbox
          @check-change="handleCheckChange">
        </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddOrgFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="setOrg">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog title="添加流程分类" :visible.sync="addWorkTreeVisible" @open="beforeOpenTree">
      <el-form :model="typeform">
        <el-form-item label="流程分类名称" :label-width="formLabelWidth">
          <el-input v-model="typeform.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addWorkTreeVisible = false">取 消</el-button>
        <el-button type="primary" @click="addWorkTree">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="设置类型" :visible.sync="setTypeVisible" @open="typeDialog">
        <el-tree ref="setTypeTree" node-key="id" :data="typeList" :props="defaultProps" show-checkbox @check-change="handleCheckTypeChange"></el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="setTypeVisible = false">取 消</el-button>
          <el-button type="primary" @click="setType">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="编辑流程" :visible.sync="setNameVisible">
        <el-form :model="nameform">
          <el-form-item label="流程名称" :label-width="formLabelWidth">
            <el-input v-model="nameform.name"></el-input>
          </el-form-item>
          <el-form-item label="流程对应编号" :label-width="formLabelWidth">
            <el-input v-model="nameform.nameNo"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="setNameVisible = false">取 消</el-button>
          <el-button type="primary" @click="setName">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        tableData:[],
        workList:[{
          id:"",
          name:"流程种类",
          items:[]
        }],
        typeList:[{
          id:"",
          name:"流程种类",
          items:[]
        }],
        pageSize:10,
        pageNo:1,
        total:0,
        dialogFormVisible :false,
        dialogAddOrgFormVisible:false,
        node:{},
        treenode:{},
        orgList: [
          {
            id: "",
            name: "组织架构",
            items: []
          }
        ],
        defaultProps: {
          children: "items",
          label: "name"
        },
        form: {
          name: '',
          nameNo:'',
        },
        formLabelWidth: '100px',
        addWorkTreeVisible:false,
        typeVisible:false,
        typeform : {
          name:""
        },
        setTypeVisible:false,
        setNameVisible:false,
        nameform:{
          name:"",
          nameNo:'',
        }
      }
    },
    watch:{
      newValue(val, oldVal){
        console.log("form.name: "+val, oldVal);
        console.log(val.length);
      }
    },
    computed: {
      newValue() {
        return this.form.name;
        }
    },
    mounted(){
      this.getWorkFlowList();
      this.getOrgList();
      this.getWorkList();
      this.treenode.id=''
    },
    methods:{
      typeDialog(){
        console.log(this.typeList);
      },
      getWorkList(){
        let _this = this;
        this.http.post("/api/flow/category/getCategoryTree")
        .then(res => {
          console.log(res);
          this.workList[0].items = res.data.data;
          this.typeList[0].items = this.workList[0].items;
          // _this.getWorkFlowList();
        })
      },
      getWorkFlowList(){
        this.http.post("/api/flow/definition/query",{
          P_ORDER:"DESC",
          P_SORT:"create_time",
          P_NO:this.pageNo,
          P_SIZE:this.pageSize
        })
        .then(res => {
          this.tableData = res.data.rows;
          this.total = res.data.records;
        })
      },
      getOrgList() {
        var _this = this;
        this.http
          .post("/api/org/orgNodeList", {
            type: "org"
          })
          .then(res => {
            let data = res.data.data;
            _this.orgList[0].items = data;
          })
          .catch(err => {});
      },
      handleClick(data) {
        console.log(data)
        this.$router.replace('/workflow/'+data.id);
      },
      handleCurrentChange(val) {
        this.pageNo = val;
        this.getWorkFlowList();
      },
      addWorkFlow() {
        if(this.form.nameNo == ""){
          this.$message.error("请输入流程对应编号！")
          return
        }else{
          this.dialogFormVisible = false;
          this.http.post('/api/flow/definition/save',{name:this.form.name,shortName:this.form.nameNo})
            .then((res)=>{
              console.log(res);
              if(res.data.code === 200){
                this.$router.replace('/workflow/'+res.data.data.id);
                // this.props.history.push("/workflow/configure/"+res.data.data.id);
              }
              else{
                this.$message.error(res.data.msg);
              }
            })
            .catch((error) => {
              console.log(error)
            })
          this.form.name='';
          this.form.nameNo=''
        }

      },
      handleReleaClick(data){
        this.http.post("/api/flow/definition/save",{
          id:data.id,
          status:1,
        })
        .then(res => {
          if(res.data.code === 200){
            this.$message.success("启用成功！");
            this.handleNodeClick(this.treenode);
          }
          else{
            this.$message.error(res.data.msg);
          }
        })
      },
      handleVoidClick(data){
        this.http.post("/api/flow/definition/save",{
          id:data.id,
          status:0,
        })
        .then(res => {
          if(res.data.code === 200){
            this.$message.success("停用成功！");
            this.handleNodeClick(this.treenode);
          }
          else{
            this.$message.error(res.data.msg)
          }
        })
      },
      handleClickAddOrg(data){
        console.log(data);
        this.node = data;
        this.dialogAddOrgFormVisible = true;
        this.http.post("/api/flow/definition/getGrantOrgId",{
          definitionId:this.node.id
        })
        .then(res => {
          console.log(res);
          let data = res.data.data;
          this.$refs.setOrgTree.setCheckedKeys(data);
        })
      },
      handleClickAddType(data){
        this.node = data;
        this.setTypeVisible = true;
        this.http.post("/api/flow/definition/getGrantCategoryId",{
          definitionId:this.node.id
        })
        .then(res => {
          console.log(res);
          let data = res.data.data;
          this.$refs.setTypeTree.setCheckedKeys(data);
        })
      },
      setOrg() {
        let _this = this;
        let checkList = this.$refs.setOrgTree.getCheckedKeys(true);
        let orgId = checkList.join(",");
        console.log(checkList);
        console.log(orgId);
        if (orgId == null || orgId == "") {
          this.$message.warning("请选择一项有效数据");
          return;
        }
        this.http
          .post("/api/flow/definition/grant", {
            id: this.node.id,
            value: orgId,
            type:"2"
          })
          .then(res => {
            var data = res.data;
            if (data.code === 200) {
              this.dialogAddOrgFormVisible = false;
              this.handleNodeClick(this.treenode);
              this.$message.success(data.msg);
            } else {
              this.$message.error(data.msg);
            }
          });
      },
      onchangeName() {
        console.log(this.form.name);
      },
      getqueryList(){
        this.http.post("/api/flow/definition/query",{
          P_ORDER:"DESC",
          P_SORT:"create_time",
          category_id:window.localStorage.category_id,
          P_NO:this.pageNo,
          P_SIZE:this.pageSize
        })
          .then(res => {
            this.tableData = res.data.rows;
            this.total = res.data.records;
          })
      },
      handleNodeClick(val){
        this.treenode = val;
        this.pageNo = 1;
        if(val.id == ""||val.id==undefined){
          this.getWorkFlowList();
        }
        else{
          window.localStorage.category_id=val.id,
            this.getqueryList()
        }
      },
      addWorkTree(){
        let _this = this;
        console.log(this.typeform.name);
        console.log(this.treenode.id);
        console.log("这里是新建");
        this.http.post("/api/flow/category/save",{
          parentId:this.treenode.id,
          name:this.typeform.name
        })
        .then(res => {
          console.log(res);
          this.$message.success(res.data.msg)
          _this.getWorkList();
          this.addWorkTreeVisible = false;
        })
      },
      beforeOpenTree(){
        this.typeform.name = "";
      },
      typeDelete(){
        let _this = this;
        this.http.post("/api/flow/category/delete",{
          id:this.treenode.id
        })
        .then(res => {
          console.log(res);
          this.$message.success(res.data.msg)
          _this.getWorkList();
          _this.treenode.id=''
          _this.typeVisible = false;
        })
      },
      setType(){
        let _this = this;
        let list = this.$refs.setTypeTree.getCheckedKeys(true);
        let typeId = list.join(',');
        if (typeId == null || typeId == "") {
          this.$message.warning("请选择一项有效数据");
          return;
        }
        // console.log(this.node);
        this.http
          .post("/api/flow/definition/saveCategory", {
            definitionId: this.node.id,
            categoryId:typeId
          })
          .then(res => {
            var data = res.data;
            if (data.code === 200) {
              this.setTypeVisible = false;
              this.$message.success(data.msg);
              console.log(this.treenode);
              this.handleNodeClick(this.treenode);
            } else {
              this.$message.error(data.msg);
            }
          });
      },
      handleCheckChange(data, checked, indeterminate){
        console.log(data, checked, indeterminate);
      },
      handleCheckTypeChange(data, checked, indeterminate){
        console.log(data, checked, indeterminate);
      },
      handleClickEditName(data) {
        console.log(data);
        this.node = data;
        this.nameform.name = data.name;
        this.nameform.nameNo = data.shortName;
        this.setNameVisible = true;
      },
      setName() {
        console.log(name)
        this.http.post("/api/flow/definition/saveInfo",{
          id:this.node.id,
          name:this.nameform.name,
          shortName:this.nameform.nameNo
        })
        .then(res => {
          console.log(res);
          this.$message.success(res.data.msg)
          this.setNameVisible = false;
          this.nameform.name = '';
          this.nameform.nameNo='';
          this.handleNodeClick(this.treenode);
        })
      }
    }
  }
</script>
<style lang="scss">
  #workflow{
    padding: 0 20px;
    height: 100%;
    .workflow-top-button{
      margin-bottom: 20px;
    }
    .workflow-table{
      .paddingTop{
        padding-top: 20px;
      }
    }
    .tree{
      height: 100%;
      width: 15%;
      float: left;
      overflow-x: auto;
      border-right: 1px solid #CCC;
    }
    .table{
      padding-left: 2%;
      float: right;
      width: 85%;
    }
  }
</style>


